<template>
  <el-dialog
    :visible.sync="visible"
    @close="closeEvent"
    :close-on-click-modal="false"
    append-to-body
    width="80%"
    title="供应商信息"
    top="10px"
  >
    <el-divider content-position="left">基本信息</el-divider>
    <table class="cus-table" v-if="profile && profile.detail">
      <tr>
        <td>供应商名称</td>
        <td>{{ profile.name }}</td>
        <td>供应商编码</td>
        <td>{{ profile.code }}</td>
        <td>统一社会信用代码</td>
        <td>{{ profile.uscc }}</td>
      </tr>
      <tr>
        <td>企业性质</td>
        <td>
          {{ dict.label.enterprise_property[profile.detail.property] }}
        </td>
        <td>联系人姓名</td>
        <td>{{ profile.contactPerson }}</td>
        <td>联系人手机</td>
        <td>{{ profile.contactPhone }}</td>
      </tr>
      <tr>
        <td>公司电话</td>
        <td>{{ profile.companyPhone }}</td>
        <td>创立日期</td>
        <td>{{ profile.detail.foundedAt }}</td>
        <td>法人代表</td>
        <td>{{ profile.legalPerson }}</td>
      </tr>
      <tr>
        <td>公司地址</td>
        <td colspan="3">{{ profile.detail.address }}</td>
        <td>邮箱</td>
        <td>{{ profile.detail.email }}</td>
      </tr>
      <tr>
        <td>注册资金（万元）</td>
        <td>{{ profile.detail.registeredFund }}</td>
        <td>固定资产（万元）</td>
        <td>{{ profile.detail.fixedFund }}</td>
        <td>总资产（万元）</td>
        <td>{{ profile.detail.totalFund }}</td>
      </tr>
      <tr>
        <td>营业执照</td>
        <td>
          <el-image
            :src="`${baseURL}/license/${profile.detail.license}`"
            :preview-src-list="[`${baseURL}/license/${profile.detail.license}`]"
            fit="contain"
            lazy
            class="profile-license"
          ></el-image>
        </td>
        <td>有效期至</td>
        <td>{{ profile.detail.expiredAt }}</td>
        <td>员工总数</td>
        <td>{{ profile.detail.totalEmployees }}</td>
      </tr>
      <tr>
        <td>供货品类</td>
        <td colspan="5">{{ STOCKS_FORMAT(profile.availableStock) }}</td>
      </tr>
      <tr>
        <td>开户行联行号</td>
        <td>{{ profile.detail.bank.line }}</td>
        <td>支行名称</td>
        <td>{{ profile.detail.bank.branch }}</td>
        <td>银行账号</td>
        <td>{{ profile.detail.bank.accountNumber }}</td>
      </tr>
      <tr>
        <td>账号名称</td>
        <td colspan="5">{{ profile.detail.bank.accountName }}</td>
      </tr>
    </table>
    <AuditRecordList :records="auditRecord"></AuditRecordList>
    <el-divider content-position="left" v-if="initedProfile">审核理由</el-divider>
    <el-input
      type="textarea"
      placeholder="审核理由"
      v-model="reason"
      class="audit-reason"
      v-if="initedProfile"
      resize="none"
      maxlength="100"
      show-word-limit
    ></el-input>
    <div slot="footer" class="dialog-footer" v-if="initedProfile">
      <el-button type="danger" @click="audit('BLOCK')">不通过审核</el-button>
      <el-button type="primary" @click="audit('PASS')">通过审核</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import * as SupplierRequest from '@/api/supplier';
  import AuditRecordList from './auditRecordList';
  import { STOCKS_FORMAT } from '@/utils/stock';

  export default {
    props: {
      dialog: {
        type: Boolean,
        default: false,
      },
      profile: {
        type: Object,
        default: () => {},
      },
      checkOnly: {
        type: Boolean,
        default: false,
      },
    },
    components: { AuditRecordList },
    dicts: ['enterprise_property', 'supplier_status'],
    data() {
      return {
        visible: this.dialog,
        baseURL: process.env.VUE_APP_BASE_API,
        posting: false,
        reason: '',
        auditRecord: [],
      };
    },
    computed: {
      initedProfile() {
        // 如果只是查看, 也不显示
        if (this.checkOnly) return false;
        // 如果没有数据也不显示
        if (!this.profile) return false;
        return this.profile.status === 'INIT';
      },
    },
    watch: {
      dialog() {
        this.visible = this.dialog;
        if (this.visible) {
          this.getAuditRecord();
        }
      },
    },
    methods: {
      STOCKS_FORMAT,
      getAuditRecord() {
        SupplierRequest.getSupplierAuditRecord({
          supplierId: this.profile.id,
        }).then((res) => {
          this.auditRecord = res.content;
        });
      },
      audit(status) {
        if (this.posting) return;

        if (!this.reason) {
          return this.$message.error('请填写审核原因!');
        }

        SupplierRequest.setSupplierStatus({
          id: this.profile.id,
          reason: this.reason,
          status,
        })
          .then(() => {
            this.$message.success(`${this.profile.name}审核操作完成!`);
            this.$emit('success');
            this.$emit('update:dialog', false);
          })
          .finally(() => {
            this.posting = false;
            this.reason = '';
          });
      },
      closeEvent() {
        this.$emit('update:dialog', false);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .audit-reason {
    margin: 10px 0 0;
  }
</style>
